<template>
    <Layout>
        <el-card>
            <span class="span">证书领取列表</span>
            <el-table :data="list" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                <el-table-column prop="id" label="序号" width="150">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="unitName" label="单位名称" width="300">
                </el-table-column>
                <el-table-column prop="pid" label="证书编号" width="180">
                </el-table-column>
                <el-table-column prop="sign" label="签字" width="180">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="select(scope.row)" icon="el-icon-edit"
                            circle></el-button>
                        <el-button size="small" type="success" @click="update(scope.row)" icon="el-icon-check"
                            circle></el-button>
                        <el-button size="small" type="danger" @click="deleted(scope.row)" icon="el-icon-delete"
                            circle></el-button>
                    </template>
                </el-table-column>
            </el-table>


            <div class="block">
                <el-pagination background layout="prev, pager, next" :page-count="pager.pages"
                    :current-page.sync="pager.page" @current-change="currentChange" :page-size.sync="pager.limit">
                </el-pagination>
            </div>
        </el-card>
    </Layout>
</template>    
<script>
import Layout from '@/components/Layout.vue';
import axios from 'axios';
export default {
    data() {
        return {
            list: [],
            loading: false,
            pager: {
                limit: 10,
                page: 1,
                pages: 1,
            },
        }
    },
    methods: {
        select(row) {
            this.$router.push({
                name: "registerview",
                params: {
                    cid: row.id
                }
            })
        },
        update() {
            this.$router.push({
                name: "registerview",
            })
        },
        deleted(row) {
            axios({
                url: "http://43.143.166.235:8090/register/deleted?id=" + row.id
            }).then(res => {
                console.log(res)
            })
        },
        currentChange(page) {
            this.pager.page = page
            axios({
                url: "http://43.143.166.235:8090/register/list?page=" + this.pager.page + "&limit=" + this.pager.limit
            }).then(res => {
                this.list = res.data.data.list.list
                this.pager = {
                    page: res.data.data.page,
                    pages: res.data.data.pages,
                    limit: res.data.data.limit
                }
            })
        },
    },
    created() {
        this.loading = true
        axios({
            url: "http://43.143.166.235:8090/register/list?page=" + this.pager.page + "&limit=" + this.pager.limit
        }).then(res => {
            console.log(res)
            this.list = res.data.data.list.list
            this.pager = {
                page: res.data.data.page,
                pages: res.data.data.pages,
                limit: res.data.data.limit
            }
        }).finally(() => {
            setTimeout(() => {
                this.loading = false
            }, 100)
        })
    },
    components: {
        Layout
    }
}
</script>

<style></style>